<template>
  <div class="login">
      <div class="login_top clearfix">
      <a href="" class="login_logo"><img src="../assets/images/logo02.png"></a>	
      </div>
      <div class="login_form_bg">
          <div class="login_form_wrap clearfix">
              <div class="login_banner fl"></div>
              <div class="slogan fl">{{slogan}}</div>
              <div class="login_form fr">
                <div class="login_title clearfix">
                    <h1>用户登录</h1>
                    <router-link to="/register">用户注册</router-link>
                </div>
                <div class="form_input">
                    <form>
                        <input v-model="username" class="name_input" type="text" name="username" placeholder="请输入用户名">
                        <input v-model="password" class="pass_input" type="password" name="pwd" placeholder="请输入密码">
                        <div class="more_input clearfix">
                            <input type="checkbox" name="">
                            <label>记住用户名</label>
                            <a href="#">忘记密码</a>
                        </div>
                        <input :click="submitLoginRequest" type="button" name="" value="登录" class="input_submit">
                    </form>
                </div>
              </div>
          </div>
      </div>
      <Footer></Footer>
  </div>
</template>

<script>

export default {
  name: "Login",
  components:{
    
  },
  methods: {
    submitLoginRequest:function(){
      alert("显示loading,发起请求！");
      console.log("username:" + this.username + "====" + "password:" + this.password);
    },
  },
  data(){
    return {
      "slogan":"日夜兼程 · 急速送达",
      "username":"",
      "password":""
    }
  },
  watch:{
    username : function(newUsername, oldUsername){
      console.log(newUsername)
      console.log(oldUsername)
    }
  }
}
</script>

<style>
.login{font-family:'Microsoft Yahei';font-size:12px;color:#666;height:100%}
.login_top{width:960px;height:130px;margin:0 auto;}
.login_logo{display:block; width:193px;height: 76px;margin-top: 30px;}
.login_form_bg{height:480px;background-color:#518e17}
.login_form_wrap{width:960px;height:480px;margin:0 auto;}
.login_banner{width:381px;height:322px;background:url(../assets/images/login_banner.png) no-repeat;margin-top:90px;}
.slogan{width:40px;height:300px;font-size:30px;color:#f0f9e8;text-align:center;line-height:36px;margin:80px 0 0 120px}
.login_form{width:368px;height:378px;background-color: white; border: 1px solid #c6c6c5; margin-top: 50px;float: right;}
.login_title{height:60px;width: 308px;margin:10px auto;border-bottom:1px solid #e0e0e0;}
.login_title h1{font-size: 24px;height: 60px;line-height: 60px;float: left; margin-left: 44px;color:#a8a8a8;font-weight: bold;}
.login_title a{width: 100px; height: 20px; display: block;font-size: 16px;color:#5fb42a;text-indent: 26px;background: url(../assets/images/icons02.png) left 5px no-repeat;float: left;margin: 20px 0 0 36px;}
.form_input{width: 308px;height: 250px;margin: 20px auto;position: relative;}
.name_input,.pass_input{width:306px;height:36px;border:1px solid #e0e0e0;background:url(../assets/images/icons02.png) 280px -41px no-repeat #f8f8f8;outline:none;font-size:14px;text-indent:10px;position: absolute;left:0;top:0}
.pass_input{top:65px;background-position:280px -95px;}
.more_input{position: absolute; left:0; top: 130px;width:100%}
.more_input input{float: left;margin-top: 2px;}
.more_input label{margin-left: 10px;float: left;}
.more_input a{float:right;color: #666;}
.more_input a:hover{color: #ff8800}
.input_submit{position:absolute;left:0;top:180px;width: 100%;height: 40px;background-color: #47aa34;color:#fff;font-size: 22px;border: 0px;}
</style>